<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>所有能耗监测</title>
  <link rel="stylesheet" href="css/index.css" />
</head>

<body>

  <!-- 页面主体部分 -->
  <section class="mainbox">
    <div class="column">
      <div class="panel bar">
        <h2>最新动态</h2>
        <div class="scroll-box" style="color: #fff;text-align: center;font-size: large;">
          <ul>
            <li>最新消息1最新消息1最新消息1</li>
            <li>最新消息2最新消息2最新消息2</li>
            <li>最新消息3最新消息3最新消息3</li>
            <li>最新消息4最新消息4最新消息4</li>
            <li>最新消息5最新消息5最新消息5</li>
            <li>最新消息6最新消息6最新消息6</li>
            <li>最新消息7最新消息7最新消息7</li>
            <li>最新消息8最新消息8最新消息8</li>
            <li>最新消息9最新消息9最新消息9</li>
            <li>最新消息10最新消息10最新消息10</li>
          </ul>
        </div>
      </div>
      <div class="panel line">
        <h2>
          区域能耗
        </h2>
        <div class="chart"></div>
        <div class="panel-footer"></div>
      </div>
    </div>
    <div class="column">
      <!-- no模块制作 -->
      <div class="no">
        <div class="no-hd">
          <ul>
            <li>电 50%</li>
            <li>水 50%</li>
            <li>气 50%</li>
          </ul>
        </div>
        <div class="no-bd">
          <ul>
            <li></li>
          </ul>
        </div>
      </div>
      <!-- 地图模块 -->
      <div class="map">
        <!-- <div class="map1"></div>
        <div class="map2"></div>
        <div class="map3"></div> -->
        <iframe src='https://www.thingjs.com/s/d1f91ddf67c24c7601316cad' scroll='false' width="100%" height="60%"
          style="border: none;"></iframe>
      </div>
    </div>
    <div class="column">
      <div class="panel bar2">
        <h2>能源预警</h2>
        <div class="chart">
          <table style="width: 100%;margin-top: 30px;">
            <thead style="font-size: 15px;">
              <tr>
                <th style="color: #fff;width: 33%;">时间</th>
                <th style="color: #fff;width: 33%;">报警信息</th>
                <th style="color: #fff;width: 33%;">报警等级</th>
              </tr>
            </thead>

            <tbody style="width: 100%;text-align: center;color: #fff;font-size: 13px;">
              <tr style="height: 50px;line-height: 50px;width: 100%;">
                <td>05-10 08 59:00</td>
                <td style="color:#FF3962">一号变压器功率因数低</td>
                <td>重要</td>
              </tr>
              <tr style="height:50px;line-height: 50px;">
                <td>05-10 08 59:00</td>
                <td style="color:#EFE058">二号变压器功率因数低</td>
                <td>重要</td>
              </tr>
              <tr style="height:50px;line-height: 50px;">
                <td>05-10 08 59:00</td>
                <td style="color:#09EDBA">一号变压器功率因数正常</td>
                <td>重要</td>
              </tr>
            </tbody>

          </table>
        </div>
        <div class="panel-footer"></div>
      </div>
      <div class="panel line2">
        <h2>工序能耗</h2>
        <div class="chart">图表</div>
        <div class="panel-footer"></div>
      </div>
      <!-- <div class="panel pie2">
        <h2>饼形图-地区分布</h2>
        <div class="chart">图表</div>
        <div class="panel-footer"></div>
      </div> -->
    </div>
    <div class="panel pie" style="width: 99%;position: absolute;top: 68%;">
      <h2>产能能耗比</h2>
      <div class="chart"></div>
      <div class="panel-footer"></div>
    </div>
  </section>
  <script src="js/flexible.js"></script>
  <script src="js/echarts.min.js"></script>
  <!-- 先引入jquery -->
  <script src="js/jquery.js"></script>
  <!-- 必须先引入china.js 这个文件 因为中国地图需要 -->
  <script src="js/china.js"></script>
  <script src="js/index.js"></script>
</body>

</html>